<template>
    <div class="home-container">
        <!-- 顶部轮播图 -->
        <div class="banner-section">
            <el-carousel height="400px" indicator-position="outside">
                <el-carousel-item v-for="(banner, index) in banners" :key="index">
                    <img :src="`${banner.image}`" :alt="banner.title" class="banner-image">
                    <div class="banner-overlay">
                        <h2>{{ banner.title }}</h2>
                        <p>{{ banner.description }}</p>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 热门分类 -->
        <div class="category-section">
            <h2 class="section-title">热门分类</h2>
            <div class="category-list">
                <div
                    v-for="category in categories"
                    :key="category.id"
                    class="category-item"
                    @click="handleCategoryClick(category.id)"
                >
                    <div class="category-icon">
                        <el-icon :size="40">
                            <component :is="category.icon" />
                        </el-icon>
                    </div>
                    <h3>{{ category.name }}</h3>
                    <p>{{ category.description }}</p>
                </div>
            </div>
        </div>

        <!-- 热门商家 -->
        <div class="shop-section">
            <div class="section-header">
                <h2 class="section-title">热门商家</h2>
                <el-link type="primary" :underline="false" @click="goToShopsPage">
                    查看全部 <el-icon><ArrowRight /></el-icon>
                </el-link>
            </div>
            <div class="shop-list">
                <div
                    v-for="shop in featuredShops"
                    :key="shop.id"
                    class="shop-card"
                    @click="goToShopDetail(shop.id)"
                >
                    <el-image
                        :src="shop.image"
                        fit="cover"
                        class="shop-image"
                    >
                        <template #error>
                            <div class="image-error">
                                <el-icon><Picture /></el-icon>
                            </div>
                        </template>
                    </el-image>
                    <div class="shop-info">
                        <h3>{{ shop.name }}</h3>
                        <div class="shop-meta">
                            <span><el-icon><Location /></el-icon> {{ shop.location }}</span>
                            <span><el-icon><Star /></el-icon> {{ shop.rating }}</span>
                        </div>
                        <div class="shop-tags">
                            <el-tag
                                v-for="tag in shop.tags.slice(0, 2)"
                                :key="tag"
                                size="small"
                                type="info"
                            >
                                {{ tag }}
                            </el-tag>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 推荐剧本 -->
        <div class="script-section">
            <div class="section-header">
                <h2 class="section-title">推荐剧本</h2>
                <el-link type="primary" :underline="false" @click="goToScriptsPage">
                    查看全部 <el-icon><ArrowRight /></el-icon>
                </el-link>
            </div>
            <div class="script-list">
                <div
                    v-for="script in featuredScripts"
                    :key="script.id"
                    class="script-card"
                    @click="goToScriptDetail(script.id)"
                >
                    <el-image
                        :src="script.cover"
                        fit="cover"
                        class="script-image"
                    >
                        <template #error>
                            <div class="image-error">
                                <el-icon><Picture /></el-icon>
                            </div>
                        </template>
                    </el-image>
                    <div class="script-info">
                        <h3>{{ script.title }}</h3>
                        <div class="script-meta">
                            <span><el-icon><User /></el-icon> {{ script.players }}人</span>
                            <span><el-icon><Clock /></el-icon> {{ script.duration }}小时</span>
                        </div>
                        <div class="script-tags">
                            <el-tag
                                v-for="genre in script.genres.slice(0, 2)"
                                :key="genre"
                                size="small"
                                :type="getGenreTagType(genre)"
                            >
                                {{ genre }}
                            </el-tag>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 特色活动 -->
        <div class="event-section">
            <h2 class="section-title">特色活动</h2>
            <div class="event-list">
                <div
                    v-for="event in events"
                    :key="event.id"
                    class="event-card"
                >
                    <el-image
                        :src="event.image"
                        fit="cover"
                        class="event-image"
                    />
                    <div class="event-content">
                        <h3>{{ event.title }}</h3>
                        <p>{{ event.description }}</p>
                        <el-button type="primary" size="small">查看详情</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
    Picture, Location, Star, User, Clock, ArrowRight,
    MagicStick, IceTea, Moon, Sunset, Sunny, Tickets
} from '@element-plus/icons-vue'
import banner1 from '@/assets/image/banner1.png'
import banner2 from '@/assets/image/banner2.png'
import banner3 from '@/assets/image/banner3.png'
import banner4 from '@/assets/image/banner4.png'


const router = useRouter()

// 轮播图数据
const banners = ref([
    {
        image: banner1,
        title: '沉浸式剧本杀体验',
        description: '专业DM带本，多重结局等你探索'
    },
    {
        image: banner2,
        title: '新本首发',
        description: '最新城限剧本《月下沙利叶》震撼上线'
    },
    {
        image: banner3,
        title: '周末特惠',
        description: '每周五六日全场8折优惠'
    },
    {
        image:banner4,
        title: '周末特惠',
        description: '每周五六日全场8折优惠'
    }
])

// 分类数据
const categories = ref([
    { id: 1, name: '恐怖惊悚', description: '心跳加速的刺激体验', icon: 'Moon' },
    { id: 2, name: '情感沉浸', description: '感人至深的故事剧情', icon: 'Sunset' },
    { id: 3, name: '硬核推理', description: '烧脑的推理挑战', icon: 'MagicStick' },
    { id: 4, name: '欢乐机制', description: '轻松愉快的游戏体验', icon: 'IceTea' },
    { id: 5, name: '阵营对抗', description: '策略与合作的较量', icon: 'User' },
    { id: 6, name: '城市限定', description: '独家优质剧本', icon: 'Star' }
])

// 热门商家数据
const featuredShops = ref([
    {
        id: 1,
        name: '谜城剧本杀旗舰店',
        image: 'https://example.com/shop1.png',
        location: '朝阳区',
        rating: 4.8,
        tags: ['环境好', 'DM专业', '服装精美']
    },
    {
        id: 2,
        name: '推理俱乐部',
        image: 'https://example.com/shop2.png',
        location: '海淀区',
        rating: 4.6,
        tags: ['硬核本多', '交通便利']
    },
    {
        id: 3,
        name: '沉浸式体验馆',
        image: 'https://example.com/shop3.png',
        location: '东城区',
        rating: 4.9,
        tags: ['实景搜证', '服装精美']
    },
    {
        id: 4,
        name: '欢乐剧本工坊',
        image: 'https://example.com/shop4.png',
        location: '西城区',
        rating: 4.5,
        tags: ['欢乐本多', '新手友好']
    }
])

// 推荐剧本数据
const featuredScripts = ref([
    {
        id: 1,
        title: '古木吟',
        cover: 'https://example.com/script1.png',
        players: '6-6',
        duration: 4,
        genres: ['情感', '校园', '微恐']
    },
    {
        id: 2,
        title: '年轮',
        cover: 'https://example.com/script2.png',
        players: '5-5',
        duration: 5,
        genres: ['硬核', '还原', '烧脑']
    },
    {
        id: 3,
        title: '你好',
        cover: 'https://example.com/script3.png',
        players: '6-6',
        duration: 3.5,
        genres: ['情感', '治愈']
    },
    {
        id: 4,
        title: '病娇男孩的精分日记',
        cover: 'https://example.com/script4.png',
        players: '7-7',
        duration: 4,
        genres: ['微恐', '还原']
    }
])

// 特色活动数据
const events = ref([
    {
        id: 1,
        title: '新手免费体验日',
        image: 'https://example.com/event1.png',
        description: '每周三新手免费体验指定剧本'
    },
    {
        id: 2,
        title: '剧本杀比赛',
        image: 'https://example.com/event2.png',
        description: '月度剧本杀挑战赛，赢取丰厚奖品'
    },
    {
        id: 3,
        title: '作者见面会',
        image: 'https://example.com/event3.png',
        description: '知名剧本作者现场交流'
    }
])

// 获取剧本标签类型
const getGenreTagType = (genre) => {
    const map = {
        '恐怖': 'danger',
        '情感': 'success',
        '欢乐': 'warning'
    }
    return map[genre] || 'info'
}

// 导航方法
const handleCategoryClick = (categoryId) => {
    router.push({ path: `/category`, query: { category: categoryId } })
}

const goToShopsPage = () => {
    router.push('/shops')
}

const goToShopDetail = (shopId) => {
    router.push(`/shops/${shopId}`)
}

const goToScriptsPage = () => {
    router.push('/scripts')
}

const goToScriptDetail = (scriptId) => {
    router.push(`/scripts/${scriptId}`)
}
</script>

<style scoped>
.home-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 轮播图样式 */
.banner-section {
    margin-bottom: 40px;
    border-radius: 8px;
    overflow: hidden;
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
}

.banner-overlay h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

/* 分类样式 */
.category-section {
    margin-bottom: 40px;
}

.section-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #333;
    position: relative;
    padding-left: 15px;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 4px;
    background: linear-gradient(to bottom, #6a11cb, #2575fc);
    border-radius: 2px;
}

.category-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.category-item {
    background: white;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.category-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.category-icon {
    margin-bottom: 15px;
    color: #6a11cb;
}

.category-item h3 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
}

.category-item p {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
}

/* 商家和剧本列表样式 */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.shop-list,
.script-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.shop-card,
.script-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.shop-card:hover,
.script-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.shop-image,
.script-image {
    width: 100%;
    height: 180px;
}

.image-error {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    color: #999;
}

.shop-info,
.script-info {
    padding: 15px;
}

.shop-info h3,
.script-info h3 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
}

.shop-meta,
.script-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #666;
    font-size: 0.9rem;
}

.shop-tags,
.script-tags {
    margin-top: 10px;
}

/* 特色活动样式 */
.event-section {
    margin-top: 40px;
}

.event-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.event-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.event-image {
    width: 100%;
    height: 180px;
}

.event-content {
    padding: 15px;
}

.event-content h3 {
    margin: 0 0 10px 0;
}

.event-content p {
    margin: 0 0 15px 0;
    color: #666;
    font-size: 0.9rem;
}
</style>